<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>工作备忘录</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <div class="quadrants-container">
      <!-- 第一象限：不重要紧急（左上） -->
      <div class="quadrant" id="quadrant-1" data-quadrant="1">
        <h2 title="鸡肋象限，快速处理">不重要紧急<label id="quadrant-1-count"></label> <button class="add-task-btn"
            data-quadrant="1">+</button></h2>
        <div class="tasks-container" id="tasks-1"></div>
        <div class="quadrant-percentage" id="percentage-1"></div>
      </div>

      <!-- 第二象限：重要且紧急（右上） -->
      <div class="quadrant" id="quadrant-2" data-quadrant="2">
        <h2 title="危急象限，立刻马上去做">重要且紧急<label id="quadrant-2-count"></label> <button class="add-task-btn"
            data-quadrant="2">+</button></h2>
        <div class="tasks-container" id="tasks-2"></div>
        <div class="quadrant-percentage" id="percentage-2"></div>
      </div>

      <!-- 第三象限：不重要不紧急（左下） -->
      <div class="quadrant" id="quadrant-3" data-quadrant="3">
        <h2 title="无益象限，尽量避免">不重要不紧急<label id="quadrant-3-count"></label> <button class="add-task-btn"
            data-quadrant="3">+</button>
        </h2>
        <div class="tasks-container" id="tasks-3"></div>
        <div class="quadrant-percentage" id="percentage-3"></div>
      </div>

      <!-- 第四象限：重要不紧急（右下） -->
      <div class="quadrant" id="quadrant-4" data-quadrant="4">
        <h2 title="重要象限，长期规划">重要不紧急<label id="quadrant-4-count"></label> <button class="add-task-btn"
            data-quadrant="4">+</button></h2>
        <div class="tasks-container" id="tasks-4"></div>
        <div class="quadrant-percentage" id="percentage-4"></div>
      </div>

      <!-- 横向轴线（重要性轴） -->
      <div class="axis horizontal-axis">
        <span class="axis-label">重要</span>
      </div>

      <!-- 竖向轴线（紧急性轴） -->
      <div class="axis vertical-axis">
        <span class="axis-label">紧急</span>
      </div>
    </div>
    <div class="task-success">
      <div class="task-success-title">
        <h2>已完成任务</h2>
        <div class="task-success-btns">
          <a class="import-btn" title="导入"><svg t="1761361043775" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="2732" width="200" height="200">
              <path d="M512 224h-64v320h320v-64H557.3l339.9-339.9L852 94.8l-340 340z" fill="#CCCCCC" p-id="2733"></path>
              <path
                d="M864 513.2V848c0 26.5-18.8 48-41.8 48H201.8c-23 0-41.8-21.5-41.8-48V178.4c0-26.5 18.8-48 41.8-48H512v-64H201.8c-58.3 0-105.8 50.2-105.8 112V848c0 61.8 47.5 112 105.8 112h620.4c58.3 0 105.8-50.2 105.8-112V513.2h-64z"
                fill="#CCCCCC" p-id="2734"></path>
            </svg></a>
          <a class="export-btn" title="导出"><svg t="1761360597142" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="1564" width="200" height="200">
              <path
                d="M496.213333 739.84c2.133333 2.133333 4.693333 3.84 7.68 5.12 0.853333 0.426667 2.133333 0.426667 2.986667 0.853333 1.706667 0.426667 2.986667 0.853333 4.693333 0.853334 5.546667 0 11.093333-2.133333 14.933334-6.4l256-256c8.533333-8.533333 8.533333-21.76 0-30.293334s-21.76-8.533333-30.293334 0L533.333333 674.133333V128c0-11.946667-9.386667-21.333333-21.333333-21.333333s-21.333333 9.386667-21.333333 21.333333v545.706667l-219.306667-219.306667c-8.533333-8.533333-21.76-8.533333-30.293333 0s-8.533333 21.76 0 30.293333l255.146666 255.146667zM768 874.666667H256c-11.946667 0-21.333333 9.386667-21.333333 21.333333s9.386667 21.333333 21.333333 21.333333h512c11.946667 0 21.333333-9.386667 21.333333-21.333333s-9.386667-21.333333-21.333333-21.333333z"
                fill="#666666" p-id="1565"></path>
            </svg></a>
        </div>
      </div>
      <div class="task-success-list"></div>
    </div>
    <div class="information">

      <p>作者: xiaojun（417281862@qq.com）
        <label class="last-bak-data"></label>
      </p>
    </div>
  </div>

  <!-- 任务编辑模态框 -->
  <div id="task-modal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <h2 id="modal-title">添加任务</h2>
      <form id="task-form">
        <input type="hidden" id="task-id">
        <input type="hidden" id="task-quadrant">
        <div>
          <label for="task-name">任务名称:</label>
          <textarea id="task-name" required></textarea>
        </div>
        <div>
          <label for="task-deadline">截止时间（默认延后5小时）:</label>
          <input type="datetime-local" id="task-deadline" required>
        </div>
        <button type="submit">保存</button>
      </form>
    </div>
  </div>

  <script src="scripts.js"></script>
</body>

</html>